<template>
  <!--  推荐歌单结构开始  -->

  <div class="recommend-playlist">
    <!-- 推荐歌单结构 -->
    <h3 class="recommend-playlist-header">
      推荐歌单<svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-arrow-right-bold"></use>
      </svg>
    </h3>
    <div class="recommend-playlist-container d-flex justify-content-between">
      <!-- 推荐歌单需要动态生成，静态页面先手动复制4份 -->
      <div
        class="recommend-playlist-item d-flex flex-column hover"
        v-for="re in recommend"
        :key="re.creativeId"
      >
        <router-link
          :to="{
            path: '/recommendList',
            query: {
              id: re.creativeId,
            },
          }"
        >
          <div class="recommend-playlist-cover">
            <img :src="re.uiElement.image.imageUrl" alt="" />
            <svg class="recommend-playlist-icon icon" aria-hidden="true">
              <use xlink:href="#icon-zanting"></use>
            </svg>
          </div>
          <div class="recommend-playlist-title multi-text-omitted">
            {{ re.uiElement.mainTitle.title }}
          </div>
        </router-link>
      </div>
    </div>
  </div>
  <!--  推荐歌单结构结束  -->
</template>

<script>
import { getHomepage } from "@/api/api.js";
export default {
  name: "Recommend",
  data() {
    return {
      recommend: "",
    };
  },
  mounted() {
    getHomepage().then(
      (response) => {
        //console.log(response.data.data.blocks[1].creatives);
        this.recommend = response.data.data.blocks[1].creatives;
        //console.log(this.recommend);
      },
      (error) => {
        console.log(error.message);
      }
    );
  },
};
</script>

<style></style>
